<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线性和径向渐变</title>
</head>
<body>
    <svg width="400" height="150">
        <defs>
            <linearGradient x1="0%" y1="0%" x2="0%" y2="50%" id="grad1">
                <!-- <stop offset="0%" stop-color="rgb(255,255,0)"/> -->
                <!-- <stop offset="100%" stop-color="rgb(255,0,0)"/> -->
                <stop offset="0%" stop-color="blue"/>
                <stop offset="100%" stop-color="yellow"/>
            </linearGradient>
        </defs>
        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"/>
        <text fill="#ffffff" font-size="45" x="150" y="86">SVG</text>
    </svg>
    <br/>

    <svg width="400" height="150">
        <defs>
            <!-- <radialGradient cx="50%" cy="50%" r="50%" fx="50%" fy="50%" id="grad2"> -->
            <radialGradient cx="30%" cy="30%" r="50%" fx="30%" fy="30%" id="grad2">
                <stop offset="0%" stop-color="rgb(255,255,255)"/>
                <stop offset="100%" stop-color="rgb(0,0,255)"/>
            </radialGradient>
        </defs>
        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)"/>
    </svg>
</body>
</html>